import axios from "axios";
import { memo } from "react"
import { useDispatch } from "react-redux";
import { Link } from "react-router-dom"
import logo from '../assets/logo.png'
import { useDebounce } from "../hooks/useDebounce";
import { photoDataChange } from "../store/photo/photoSlice";


export interface HeaderProps {
  keyword: string;
  handleInput: (value: any) => void;
  start: number;
  category: number
}
const YiHeader: React.FC<HeaderProps> = ({ keyword, handleInput, start }) => {
  const dispatch = useDispatch();
  useDebounce(keyword, 500, async () => {
    const data = await axios.post(`http://47.93.31.63:8000/search`,
      { kw: keyword, start, count: 24 }
    )
    dispatch(photoDataChange({ payload: data.data }))
  })

  return (
    <header className="flex box-border p-2 h-20">
      <div className="w-1/5">
        <img src={logo} alt="logo" className="block w-full h-full" />
      </div>
      <div className="flex-1 flex mr-2">
        <input type="text" value={keyword} onChange={e => handleInput(e.target.value)} placeholder="请输入关键字..." className="block flex-1 box-border p-3   border-4 border-gray-700 border-r-0   rounded-l-full  outline-none   focus:border-gray-500 " />
        <button className="w-24  rounded-r-full  bg-gray-700 text-white flex justify-center items-center active:scale-105">搜索</button>
      </div>
      <button className="border border-gray-700 bg-gray-700 text-white rounded-md px-4 py-2 m-82 transition duration-500 ease select-none hover:bg-gray-500 focus:outline-none focus:shadow-outline mr-1">
        <Link to="/about">关于</Link>
      </button>
    </header>
  )
}

export default memo(YiHeader)